<template>
	<view class="set-pwd">
		<view class="input-container bg-white">
			<view class="input-item row" v-if="hasPayPwd">
				<view class="input-label md normal">Mật khẩu gốc</view>
				<u-input class="flex1" type="password" v-model="originPwd"
					placeholder="Vui lòng nhập mật khẩu giao dịch gốc" />
			</view>
			<view class="input-item row">
				<view class="input-label md normal">Mật khẩu giao dịch</view>
				<u-input class="flex1" type="password" v-model="setPwd"
					:placeholder="hasPayPwd ? 'Vui lòng nhập mật khẩu giao dịch mới' : 'Vui lòng nhập mật khẩu giao dịch'" />
			</view>
			<view class="input-item row">
				<view class="input-label md normal">Xác nhận mật khẩu</view>
				<u-input class="flex1" type="password" v-model="comfirmPwd"
					placeholder="Vui lòng xác nhận lại mật khẩu" />
			</view>
			<navigator hover-class="none" url="/pages/bundle/forget_pay_pwd/forget_pay_pwd"
				class="row-end lighter xs mr20" v-if="hasPayPwd">Quên mật khẩu gốc?</navigator>
			<button size="lg" type="primary" class="btn bg-primary white br60 row-center" @tap="setPasswordFun">
				Xác nhận
			</button>
		</view>
	</view>
</template>

<script>
	import {
		hasPayPassword,
		setPassword,
		changePayPassword
	} from "@/api/user";
	export default {
		data() {
			return {
				hasPayPwd: false,
				setPwd: '',
				comfirmPwd: '',
				originPwd: ''
			}
		},
		onLoad() {
			this.hasPayWord()
		},
		methods: {
			async setPasswordFun() {
				let {
					setPwd,
					comfirmPwd,
					originPwd,
					hasPayPwd
				} = this
				if (hasPayPwd) {
					if (!originPwd) {
						this.$toast({
							title: 'Vui lòng nhập mật khẩu giao dịch gốc'
						});
						return;

					}
				}
				if (!setPwd) {
					this.$toast({
						title: 'Vui lòng nhập mật khẩu giao dịch mới'
					});
					return;
				}
				if (!comfirmPwd) {
					this.$toast({
						title: 'Vui lòng điền mật khẩu xác nhận'
					});
					return;
				}
				if (setPwd != comfirmPwd) {
					this.$toast({
						title: 'Hai lần nhập mật khẩu không phù hợp'
					});
					return;
				}
				if (setPwd.length < 4 || setPwd.length > 8) {
					this.$toast({
						title: 'Vui lòng nhập mật khẩu có độ dài 4-6 chữ số'
					});
					return;
				}

				let data = {
					pay_password: setPwd
				};
				const {
					msg,
					code
				} = hasPayPwd ? await changePayPassword({
					origin_pay_password: originPwd,
					new_pay_password: setPwd
				}) : await setPassword(data)
				if (code == 1) {
					this.$toast({
						title: msg
					}, {
						tab: 3
					});
				}

			},
			hasPayWord() {
				hasPayPassword().then(res => {
					if (res.code == 1) {
						this.hasPayPwd = true
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.set-pwd {
		padding-top: 20rpx;

		.input-container {
			padding: 20rpx 0 100rpx;
			border-radius: 20rpx;

			.input-item {
				margin: 0 30rpx;
				height: 88rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #D7D7D7;

				.input-label {
					width: 180rpx;
					flex: none;
				}
			}

			.btn {
				margin: 80rpx 30rpx 0;
			}
		}
	}
</style>